<template>
<!--	<x-main bgColor="#ffffff">-->
    <view class="x-center">
      <view class="login x-column">
        <view class="title">账号绑定</view>
        <view class="sub-title">使用房小租管家平台公司或者门店账号进行绑定</view>
        <view class="control"><uni-easyinput placeholder="请输入您的账号" v-model="state.username"></uni-easyinput></view>
        <view class="control"><uni-easyinput placeholder="请输入您的密码" type="password" v-model="state.password"></uni-easyinput></view>
        <view class="x-btn btn" @click="onLogin">账号绑定</view>
      </view>
    </view>
<!--    <view class="bottom"><span class="desc">还没有入驻房小租？</span><span class="link">申请入驻</span></view>-->
<!--  </x-main>-->
</template>

<script setup>
import {reactive} from "vue";
import {Helper, Msg, Log} from "core";
import userStore from '@/stores/framework/user';
const UserStore = userStore();
const state = reactive({
  username: "",
  password: "",
})

const onLogin = async () => {
  if(Helper.empty(state.username)) {
    Msg.error("请输入账号")
    return;
  }

  if(Helper.empty(state.password)) {
    Msg.error("请输入密码");
    return;
  }
  await UserStore.login(state.username, state.password);
}
</script>

<style scoped lang="less">
  .login {
    margin-top: 30%;
    width: 100%;
    padding: 40rpx;
    box-sizing: border-box;

    .title {
      font-weight: 600;
      font-size: 48rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }

    .sub-title {
      font-weight: 400;
      font-size: 24rpx;
      color: #AAAAAA;
      line-height: 17px;
      margin-bottom: 40rpx;
    }

    .control {
      width: 100%;
      margin-top: 30rpx;
    }

    .btn {
      margin-top: 30rpx;
      background-color: #FF8900;
      color: #fff;
      width: 100%;
    }
  }

  .bottom {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 120rpx;

    .desc {
      color: #333;
      font-size: 28rpx;
    }

    .link {
      color: #ff8900;
      font-size: 28rpx;
    }
  }
</style>
